<template>
  <div class="index-details">
    <!-- 文章title -->
    <section class="details-header">
      <h2 class="header-title font-h2">
        {{ date.title }}
      </h2>
      <section class="header-icons">
        <section class="icon-name icon-margin">
          <i class="el-icon-user"></i>
          <span>xxx</span>
        </section>
        <section class="icon-date icon-margin">
          <i class="el-icon-time"></i>
          <span>{{ datatfilter(date.datatime) }}</span>
        </section>
        <section class="icon-readio icon-margin">
          <span>分类：{{ date.refRadio }}</span>
        </section>
      </section>
    </section>

    <!-- 文章前言 -->
    <section class="details-qianyan">
      <h2 class="qianyan-title font-h2">前言</h2>
      <p class="qianyan-zw">
        {{ date.blogtext }}
      </p>
    </section>

    <!-- 文章正文 -->
    <nr :date="date.content"/>

  </div>
</template>

<script>
import moment from 'moment';
import nr from '../../components/WenZhang/nr'

export default {
  layout: "default",
  components:{
    nr
  },
  computed:{
    datatfilter(){
      return (data)=>{
        return moment(data).format('YYYY-MM-DD h:mm:ss')
      }
    }
  },
  async asyncData({ $axios, route }) {
    let { data } = await $axios({
      url: `http://localhost:3002/details?id=${route.params.index}`,
    });
    if (data.code !== 200) {
    } else {
      return { date: data.data };
    }
  },
};
</script>

<style lang="less" scoped>
.index-details {
  background-color: white;
  margin: 0px 0px 30px 0px;

  .details-header {
    padding: 15px 30px;
    border-bottom: 1px solid #c8c8c8;
    .header-title {
      // 让盒子中的字体左右居中对其
      margin: 0px;
      text-align: center;
      color: #333333;
      font-weight: 450;
    }

    .header-icons {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      font-size: 13px;
      color: #a8a8a8;

      .icon-name {
      }
      .icon-date {
      }
      .icon-readio {
      }

      .icon-margin {
        margin: 0px 10px;
        font-weight: 340;
      }
    }
  }

  .details-qianyan {
    padding: 15px 15px;
    color: #666666;
    .qianyan-title {
      margin: 10px 0px;
    }
    .qianyan-zw {
      // height: 100px;
      font-weight: 370;
      font-size: 13px;
      line-height: 20px;
    }
  }

  .font-h2 {
    font-size: 20px;
  }
}
</style>